<!-- 投标者界面 -->
<script setup>
import {
    Message,
    UserFilled,
    User,
    EditPen,
    SwitchButton,
    CaretBottom,
    Avatar,
    Search,
    BellFilled
} from '@element-plus/icons-vue'

import { ref } from 'vue'
import userInfoStore from '@/stores/userInfo.js'
import { useRouter } from 'vue-router';
const router = useRouter();


const userStore=userInfoStore();

// 用来存储当前展开的菜单
const openedMenus = ref([])

// 处理菜单展开事件
const handleOpen = (index) => {
  openedMenus.value = [index] // 只保留一个展开的菜单
}

// 处理菜单收起事件
const handleClose = () => {
  openedMenus.value = [] // 收起时不保持展开
}

import useTokenStore from '@/stores/token.js';
const tokenStore = useTokenStore();

const handleCommand = (command) => {
  if (command === 'logout') {
    tokenStore.removeToken;
    userStore.removeInfo;
    router.push('/')
  }
};
</script>

<template>
    <el-container class="layout-container">
        <!-- 左侧菜单 -->
        <el-aside width="220px" class="aside">
            <div class="logo-container">
                <span class="logo-text">药品在线招投标</span>
            </div>
            <el-menu active-text-color="#ffd04b" background-color="#2c3e50" text-color="#ecf0f1" router
                :default-openeds="openedMenus" @open="handleOpen" @close="handleClose">
                <el-menu-item index="/bidderIndex/bidderDate">
                    <el-icon><Search /></el-icon>
                    <span>招标信息查询</span>
                </el-menu-item>
                <el-menu-item index="/bidderIndex/ourBidder">
                    <el-icon>
                        <BellFilled />
                    </el-icon>
                    <span>招标管理</span>
                </el-menu-item>
                <el-menu-item index="/bidderIndex/message">
                    <el-icon><Message /></el-icon>
                    <span>留言板</span>
                </el-menu-item>
               <!-- <el-sub-menu index="1">
                    <template #title>
                        <el-icon>
                            <UserFilled />
                        </el-icon>
                        <span style="font-size: 18px;">个人中心</span>
                    </template>
                    <el-menu-item index="/bidderIndex/Bidderlook">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本资料</span>
                    </el-menu-item>
                </el-sub-menu>-->
            </el-menu>
        </el-aside>

        <!-- 右侧主区域 -->
        <el-container>
            <!-- 头部区域 -->
            <el-header class="header">
                <div class="header-title">招标单位：<strong>{{ userStore.info.name }}</strong></div>
                <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-icon :size="40">
                            <Avatar />
                        </el-icon>
                        <el-icon>
                            <CaretBottom />
                        </el-icon>
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </el-header>

            <!-- 中间区域 -->
            <el-main>
                <div class="content-container">
                    <RouterView></RouterView>
                </div>
            </el-main>

            <!-- 底部区域 -->
            <el-footer class="footer">©2025 Created by ECUT</el-footer>
        </el-container>
    </el-container>
</template>

<style scoped>
/* 统一设置布局容器样式 */
.layout-container {
    min-height: 100vh;
}

/* 左侧菜单样式 */
.aside {
    background-color: #2c3e50;
    color: #ecf0f1;
    padding-top: 20px;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}

.logo-container {
    padding: 10px;
    text-align: center;
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #ffd04b;
}

.el-menu {
    margin-top: 20px;
}

/* 头部区域样式 */
.header {
    background-color: #34495e;
    color: #fff;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-title {
    font-size: 18px;
}

/* 右侧内容区域 */
.content-container {
    width: 100%;
    height: 750px;
    border: 1px solid #e5e5e5;
    border-radius: 5px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #ecf0f1;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #333;
}

/* 底部区域样式 */
.footer {
    text-align: center;
    padding: 10px;
    background-color: #34495e;
    color: #fff;
}

.el-dropdown__box {
    display: flex;
    align-items: center;
    gap: 5px;
}

.el-dropdown-item {
    color: #34495e;
    font-weight: bold;
}

.el-dropdown-item:hover {
    background-color: #ecf0f1;
    color: #2c3e50;
}

/* 设置整个菜单的字体大小 */
.el-menu {
    font-size: 18px;
    /* 根据需要调整为更大的字体大小 */
}

/* 设置子菜单项的字体大小 */
.el-menu-item,
.el-sub-menu .el-menu-item {
    font-size: 18px;
    /* 设置每个菜单项的字体大小 */
}
</style>
